
<% content_for :head do %>
    <!--
		<meta name="google-site-verification" content="EsepA0P7DwqW4Sl4nbRBicq3ieXXCEAYL-ID2x6ajtk" />
        <META name="y_key" content="236bc15ffcbfd131" />
        <meta name="msvalidate.01" content="128A4883E7558129DB2B4D6F00DA5610" />
		-->

    <!-- Anything Slider -->
    <%= stylesheet_link_tag 'anythingslider/anythingslider' %>
    <%=  javascript_include_tag "anythingslider/jquery.anythingslider" %>

    <!-- AnythingSlider optional extensions -->
   <!-- <%=  javascript_include_tag "anythingslider/js/anythingslider.fx" %>
   <%=  javascript_include_tag "anythingslider/js/anythingslider.video" %>
    -->

    <!-- slider dimensions -->
    <style>
        #slider { width: 450px; height: 350px;  top: 10px;
            list-style: none; }
            /* images with caption */
        ul#slider img {

            height: 67%;
        }
            /* position the panels so the captions appear correctly */
        ul#slider .panel { position: relative; }
            /* captions */
        ul#slider .caption-top, #slider .caption-right,
        ul#slider .caption-bottom, #slider .caption-left {
            background: #000;
            color: #fff;
            padding: 10px;
            margin: 0;
            position: relative;
            z-index: 10;
            opacity: .8;
            filter: alpha(opacity=80);
        }    </style>

    <!-- AnythingSlider initialization -->
    <script language="javascript">
        // caption toggle animation time
        var toggleTime = 500,
        // always show caption when slide comes into view
        showCaptionInitially = true,

        updateCaption = function(slider, init) {
            if (init && showCaptionInitially) {
                setTimeout(function() {
                    slider.$targetPage.find('.caption').animate({
                        bottom: 0
                    }, toggleTime);
                }, slider.options.delayBeforeAnimate + toggleTime);
            } else if (!init) {
                var cap = slider.$lastPage.find('.caption');
                cap.css('bottom', -cap.innerHeight());
            }
        };

        // DOM Ready
        $(function(){
            $('#slider').anythingSlider({
                //    buildNavigation    : false,
                // *********** Callbacks ***********
                // Callback when the plugin finished initializing
                onInitialized: function(e, slider) {
                    slider.$items.each(function() {
                        var cap = $(this).find('.caption');
                        cap.css('bottom', -cap.innerHeight()).click(function() {
                            cap.animate({
                                bottom: (cap.css('bottom') === "0px" ? -cap.innerHeight() : 0)
                            }, toggleTime);
                        });
                    });
                    updateCaption(slider, true);
                },

                // Callback before slide animates
                onSlideBegin: function(e, slider) {
                    updateCaption(slider, true);
                },

                // Callback after slide animates
                onSlideComplete: function(slider) {
                    updateCaption(slider, false);
                },
                buildNavigation: false,
                buildStartStop: false

            });
        });
    </script>


	<title>NoiseTube</title>
	<link rel="shortcut icon" href="/images/NoiseTube.ico"/>
	<style type="text/css">
	<!--
		.Style1 {
			font-size: 100%;
			font-weight: bold;
		}

		.Style2 {
			font-size: 16px;
			font-weight: bold;
			padding:0px;
			margin:0px;
		}
	-->
	</style>
  
  <!-- GOOGLE ANALYTICS -->
  	<!-- Nicolas 
		<script type="text/javascript">
			var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
			document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
		</script>
		<script type="text/javascript">
			pageTracker = _gat._getTracker("UA-492714-4");
			pageTracker._trackPageview();
		</script>

  	 	Matthias/BrusSense 
		<script type="text/javascript">
		  var _gaq = _gaq || [];
		  _gaq.push(['_setAccount', 'UA-5195024-3']);
		  _gaq.push(['_setDomainName', '.noisetube.net']);
		  _gaq.push(['_trackPageview']);

		  (function() {
		    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		  })();
		</script>
		-->
  <!-- END GOOGLE ANALYTICS -->

<% end %>

      <div class="row">

        <div id="home">            
          <div class="intro-cartasur">
            <h2><%= t 'cartasur.intro.title' %></h2>
            <%= t 'cartasur.intro.paragraph_html' %>
          </div>
        </div>
      </div>

      <div class="col nleft">
        <h3><%= t 'cartasur.motivation.title' %></h3>
        
        <strong><%= t 'cartasur.motivation.citizen.title' %></strong>
        <%= t 'cartasur.motivation.citizen.arguments_html' %>
                        
        <strong><%= t 'cartasur.motivation.government.title' %></strong>
        <%= t 'cartasur.motivation.government.arguments_html' %>

        <h3><%= t 'cartasur.motivation.misc.title' %></h3>
        <div class="par-cartasur"><%= t 'cartasur.motivation.misc.arguments_html' %></div>


      </div>
      
      <div class="col nright" style="padding-left:10px">


     <div style="text-align: center; width: 530px; height: 350px">
        <object width="425" height="344" >
            <!--<param name="movie" value="http://www.youtube.com/v/Gza0tyjozGs&hl=en&fs=1&" />-->
             <param name="movie" value="http://www.youtube.com/v/g8AKEG-mArU" />
            <param name="allowFullScreen" value="true" />
            <param name="allowscriptaccess" value="always" />
            <embed src="http://www.youtube.com/v/g8AKEG-mArU&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
        </object>
        <br/><br/>
     </div>
     <br />
        <div id="horizontal_carousel" >
          <div class="container">
            <ul id="slider">
              <li><center><img src="/images/slide-screenshot.png"/><br/><div class="caption"><%= raw(t 'images.legend1') %></div></center></li>
              <li><center><img alt="Window" src="/images/slide-phoneui.png" width="200" height="250"/></td><td valign="top">

                <div class="caption"><%=raw( t 'images.legend2') %></div></center>
              </li>
              <li><center><img src="/images/cities-screenshot.jpg"/><br/><div class="caption"><%= raw(t 'images.legend3') %></div></center></li>
              <li><center><img src="/images/slide-real-time.jpg" width="340" height="250" /><br/><div class="caption"><%= raw(t 'images.legend4') %></div></center></li>
              <li><center><img src="/images/slide-subway.gif"/><br/><div class="caption"><%= raw(t 'images.legend5') %></div></center></li>
            </ul>
            <div id="current-caption"></div>
          </div>
        </div>
      </div>




